<template>
  <div class="index-box">
      <div class="title">
          <span>审核物业管理费详情</span>
      </div>
      <div class="index-middlebox">
          <el-table :data="headdata"
                        border
                        style="width: 100%" >
              <el-table-column prop="addTime"
                                label="审核日期"
                                 align="center">
                </el-table-column>
              <el-table-column prop="propertyManagementFee"
                                label="物业管理费"
                                 align="center">
                </el-table-column>
              <el-table-column prop="waterElectricityFee"
                                label="水电费"
                                 align="center">
                </el-table-column>
              <el-table-column prop="costTotal"
                                label="总兑换费"
                                 align="center">
                </el-table-column>
              <el-table-column prop="applicationPropertyStatus"
                                label="审核状态"
                                align="center">
                                <template slot-scope="scope">
                                  <span v-if="scope.row.applicationPropertyStatus == 0">未审核</span>
                                  <span v-if="scope.row.applicationPropertyStatus == 1">审核通过</span>
                                  <span v-if="scope.row.applicationPropertyStatus == 2">审核不通过</span>
                                  <span v-if="scope.row.applicationPropertyStatus == 3">审核中</span>
                                </template>
                </el-table-column>
          </el-table>
      </div>
      <div class="btn-box">
          <!-- <el-button size="mini" type="primary" class="cleanbtn" @click="getcreateUserBuildingDetail">生成结算单</el-button> -->
          <el-button size="mini" type="primary" class="succeedbtn" @click="dialogVisible = true">批量审核</el-button>
          <el-dialog
                  title="批量审核"
                  :visible.sync="dialogVisible"
                  width="30%"
                  >
                  <div class="dialog-centerbox">
                     <el-radio v-model="radio" label="1">审核通过</el-radio>
                     <el-radio v-model="radio" label="2">审核不通过</el-radio>
                  </div>
                  <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="getbatchReviewPropertyUserBuilding">确 定</el-button>
                  </span>
          </el-dialog>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        border
                        :summary-method="getSummaries"
                        show-summary
                        style="width: 100%" @selection-change="handleSelectionChange">>
                <el-table-column prop="id" label="选择" width="50" align="center" type="selection">
                </el-table-column>
                <el-table-column type="index"
                                label="序号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="user_name"
                                label="业主名字"
                                 align="center">
                </el-table-column>
                <el-table-column prop="mobile_plone"
                                label="手机号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="user_site"
                                label="业主楼房号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="plumber_fee"
                                label="物业管理费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='tenement_fee'
                                label="水电费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='xlj_points'
                                label="总兑换费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='management_is_bool'
                                label="审核状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.management_is_bool == 0">未审核</span>
                                  <span v-if="scope.row.management_is_bool == 1">审核通过</span>
                                  <span v-if="scope.row.management_is_bool == 2">审核不通过</span>
                                  <span v-if="scope.row.status == 3">审核中</span>
                                </template>
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                width="280" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="getreviewPropertyUserBuilding(scope.$index, scope.row,1)" v-if="scope.row.management_is_bool == 0">审核通过</el-button>
                        <el-button size="mini" @click="getreviewPropertyUserBuilding(scope.$index, scope.row,2)" v-if="scope.row.management_is_bool == 0">审核不通过</el-button>
                        <!-- <el-button size="mini" @click="getdeleteUserBuilding(scope.$index, scope.row,1)">删除</el-button> -->
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getviewUserBuildingDetail, getreviewPropertyUserBuilding, getdeleteUserBuilding, getbatchReviewPropertyUserBuilding, getcreateUserBuildingDetail} from "@/api/partner";
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        merchandiseList:[],//列表
        supplierid:'',
        value: '',
        date: '',
        headdata:[],//头部信息
        buildingId:'',//头部id
        dialogVisible:false,//批量审核判断
        radio: '1',//批量审核默认选项
        selectionList:[],//批量审核数组
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.$route.query.row)
    let headdata = this.headdata;
    headdata.push(this.$route.query.row)
    this.buildingId = this.$route.query.row.buildingId
    this.getviewUserBuildingDetail()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      handleSelectionChange(row){
          this.selectionList = row
      },
      // 获取详情列表
      getviewUserBuildingDetail(){
        let buildingId = this.buildingId
        let data = {
          buildingId: buildingId.toString()
        }
        getviewUserBuildingDetail(data).then(res => {
          this.merchandiseList = res.rows
        })
      },
      // 合计列
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        var allplumbermoney = 0;
        var alltenementmoney = 0;
        var allxljpointsmoney = 0;
        data.map(item => {
          allplumbermoney += Number(item.plumber_fee);
          alltenementmoney += Number(item.tenement_fee);
          allxljpointsmoney += Number(item.xlj_points);
          return {allplumbermoney, alltenementmoney, allxljpointsmoney };
        });
        columns.forEach((column, index) => {
          sums[4] = "合计";
          sums[5] = allplumbermoney;
          sums[6] = alltenementmoney;
          sums[7] = allxljpointsmoney;
        });

        return sums;
      },
      // 审核
      getreviewPropertyUserBuilding(index, row,status){
        let id = row.id.toString()
        let data = {
          id:id,
          status:status
        }
        getreviewPropertyUserBuilding(data).then(res => {
          this.getviewUserBuildingDetail()
        })
      },
      //删除
      getdeleteUserBuilding(idnex, row,status){
        let data = {
          id:row.id,
          status:status
        }
        getdeleteUserBuilding(data).then(res => {
          console.log(res)
          if(res.code == 20000){
            this.$message('删除成功')
            this.getviewUserBuildingDetail()
          }
        })
      },
      // 批量审核
      getbatchReviewPropertyUserBuilding(){
        let selectionList = this.selectionList;
        let radio = parseInt(this.radio)
        let idsList = []
        selectionList.forEach(item => {
          idsList.push(item.id)
        })
        let data = {
          userBuildingIds:idsList,
          status:radio
        }
        getbatchReviewPropertyUserBuilding(data).then(res => {
          console.log(res)
          this.dialogVisible = false
          this.getviewUserBuildingDetail()
        })
      },
      // 生成结算单
      getcreateUserBuildingDetail(){
        let data = {
          buildingId:this.buildingId.toString()
        }
        getcreateUserBuildingDetail(data).then(res => {
          console.log(res)
        })
      }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
         .table-box{
            border: 1px solid #000;
            border-collapse:collapse;
            .tite-td{
                font-size: 16px;
                font-weight: bold;
            }
            td{
                width: 275px;
                height: 40px;
                text-align: center;
                border-bottom: 1px solid #000;
                border-right: 1px solid #000;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .btn-box{
        width: 100%;
        display: flex;
        justify-content: flex-end;
       padding-right: 40px;
       box-sizing: border-box;
       margin-top: 20px;
        .cleanbtn{
            width: 100px;
            height: 40px;
        }
        .succeedbtn{
            width: 100px;
            height: 40px;
        }
    }
}
</style>
